import {Drawer, List, PaginationProps} from "antd";
import Search from "antd/es/input/Search";
import {useEffect, useState} from "react";
import {postFetch} from "@/app/lib/HttpProtocol";

const apis = {
  userPageApi :'/app/user/page',
}
// @ts-ignore
export default function AppUserDrawer({open,onClose,app}) {
  const [page,setPage] = useState<any>({total:0,list:[]});
  let params:any = {appname:app.appname,pageSize:20,pageNum:1}
  const loadPage = () => {
    postFetch(apis.userPageApi,params).then(page => {
      setPage(page);
    })
  }
  useEffect(() => {
    loadPage();
  },[])
  const onSearch = (value: string) => {
    params.userKeyword = value;
    loadPage();
  }
  const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
    params.pageSize = pageSize;
    params.pageNum = current;
    loadPage();
  };
  return <Drawer
    title={"可见用户"}
    width={720}
    onClose={onClose}
    open={open}
    destroyOnClose >
    <Search placeholder="" onSearch={onSearch} enterButton />
    <List
      pagination={{position:'bottom',align:'center',total:page.total,onChange:onShowSizeChange}}
      itemLayout="horizontal"
      dataSource={page.list}
      renderItem={(item:any, index) => (
        <List.Item>
          {item.nickname}({item.username})
        </List.Item>
      )}
    />
  </Drawer>
}